.theme-jetpack-cloud,
.color-scheme.is-jetpack-cloud {
	.main {
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
	}

	.current-section {
		margin: 0 -16px;

		.site-icon {
			display: none;
		}

		button {
			// 24px from the text, -4 for the overflow from the 32px height icon
			padding: 20px 8px;

			svg {
				height: 32px;
				width: 32px;
				fill: var( --color-neutral-40 );
			}
		}

		h1.current-section__site-title {
			color: var( --color-neutral-70 );
			font-size: $font-body;
			font-weight: 400;
			padding-left: 8px;
		}
	}
}

.button {
	color: var( --color-primary-60 );
	background: var( --studio-white );
	border: 1px solid var( --color-primary-40 );
	border-radius: 3px;

	&:hover,
	&:focus {
		background: var( --color-primary-0 );
	}

	&:active {
		background: var( --color-primary-5 );
		border-color: var( --color-primary-40 );
		border-width: 1px;
	}

	&[disabled]:active {
		border-width: 1px;
	}

	&[disabled],
	&:disabled {
		color: var( --studio-gray-10 );
		border-color: var( --color-gray-10 );
		background: var( --studio-white );
	}
}

.button.is-primary {
	color: var( --studio-white );
	background: var( --color-primary-40 );
	border-color: var( --color-primary-40 );

	&:hover,
	&:focus {
		background: var( --color-primary-30 );
		border-color: var( --color-primary-30 );
	}

	&:active {
		background: var( --color-primary-50 );
		border-color: var( --color-primary-50 );
	}

	&[disabled],
	&:disabled {
		color: var( --studio-white );
		background: var( --studio-gray-10 );
		border-color: var( --studio-gray-10 );
	}
}

.button.is-scary {
	color: var( --color-scary-60 );
	border-color: var( --color-scary-50 );

	&:hover,
	&:focus {
		background: var( --color-scary-0 );
	}

	&:active {
		background: var( --color-scary-5 );
		border-color: var( --color-scary-40 );
	}

	&[disabled],
	&:disabled {
		color: var( --studio-gray-10 );
		background: none;
		border-color: var( --color-gray-10 );
	}
}

.button.is-primary.is-scary {
	color: var( --studio-white );
	background: var( --color-scary-50 );
	border-color: var( --color-scary-50 );

	&:hover,
	&:focus {
		background: var( --color-scary-40 );
		border-color: var( --color-scary-40 );
	}

	&:active {
		background: var( --color-scary-60 );
		border-color: var( --color-scary-60 );
	}

	&[disabled],
	&:disabled {
		background: var( --studio-gray-10 );
		border-color: var( --studio-gray-10 );
	}
}

.button.is-borderless {
	border: none;
	background: none;
	color: var( --studio-gray-80 );
	padding-left: 0;
	padding-right: 0;

	&:hover,
	&:focus {
		background: none;
		color: var( --studio-gray-70 );
	}

	&[disabled],
	&:disabled {
		color: var( --color-neutral-20 );
		cursor: default;

		&:active,
		&.is-active {
			border-width: 0;
		}
	}
}

.button.is-borderless.is-primary {
	color: var( --color-primary-40 );

	&:hover,
	&:focus {
		color: var( --color-primary-30 );
	}

	&:active {
		color: var( --color-primary-50 );
	}

	&[disabled],
	&:disabled {
		color: var( --studio-gray-10 );
	}
}

.button.is-borderless.is-primary.is-scary {
	color: var( --color-scary-50 );

	&:hover,
	&:focus {
		color: var( --color-scary-40 );
	}

	&:active {
		color: var( --color-scary-60 );
	}
}

// Universal Text Styles

html {

	h2 {
		font-size: $font-title-small;
		font-weight: 600;
		line-height: 32px;

		@include breakpoint-deprecated('>660px') {
			font-size: 36px;
			line-height: 40px;
		}
	}

	h3 {
		font-size: $font-body;
		font-weight: 600;
		line-height: 23px;

		@include breakpoint-deprecated( '>660px' ) {
			font-size: 18px;
			line-height: 23px;
		}
	}

	p {
		font-size: $font-body;
		line-height: 24px;

		@include breakpoint-deprecated('>660px') {
			font-size: 18px;
			line-height: 24px;
		}
	}
}

.theme-jetpack-cloud .ReactModalPortal {
	.dialog.card {
		box-shadow: 0 0 0 1px var( --color-border-subtle ), 0 4px 12px var( --color-neutral-10 );
		border-radius: 3px;
	}

	.dialog__action-buttons {
		border-radius: 0 0 3px 3px;
	}
}

.empty-content__illustration {
	filter: hue-rotate( -80deg ) saturate( 1.5 );
}
